
<template>
  <view class="content">
    <!-- 日历标题 -->
    <view class="calendar-header">
      <text class="month-title">{{ currentMonth }}</text>
      <text class="month-subtitle">月打球日历</text>
    </view>
    <!-- 日历主体 -->
    <view class="calendar-body">
      <!-- 日历表头 -->
      <view class="calendar-weekdays">
        <text v-for="weekday in weekdays" :key="weekday">{{ weekday }}</text>
      </view>
      <!-- 日历日期 -->
      <view class="calendar-dates">
        <view
            v-for="(dateObj, index) in dates"
            :key="index"
            :class="[
            'calendar-date',
            {
              'is-today': isToday(dateObj.value),
              'is-selected': isSelected(dateObj.value),
              'is-current-month': dateObj.isCurrentMonth,
              'is-other-month': !dateObj.isCurrentMonth
            }
          ]"
        >
          <text v-if="dateObj.value">{{ dateObj.value }}</text>
          <text v-else></text>
        </view>
      </view>
    </view>

    <!-- 搜索栏 -->
    <view class="search-bar">
      <view class="search-wrapper">
        <input
          type="text"
          placeholder="请输入日期,球桌号等..."
          v-model="searchQuery"
          @input="onSearch"
          class="search-input"
        />
      <!-- 本地图标（右侧） -->
        <image
          src="/static/img/search.png"
          mode="aspectFit"
          class="search-icon-right"
          @click="performSearch"
        />
      </view>
    </view>

    <!-- 无结果提示 -->
    <view v-if="shops.length === 0 && searchQuery" class="no-results">
      没有找到匹配的店铺
    </view>

    <!-- 店铺列表 -->
    <view class="shop-list">
      <view
          v-for="(shop, index) in shops"
          :key="index"
          class="shop-item"
          @click="navigateToShopDetail(shop)"
      >
        <!-- 左侧内容 -->
        <view class="shop-left">
          <view class="shop-name">{{ shop.name }}</view>
          <view class="shop-price">台球  ¥{{ shop.price }} / 分钟</view>
          <view class="shop-status">
            <text class="status-text">台球</text>
            <text class="bold-text">&nbsp;{{shop.tables }}&nbsp;</text>
            <text class="status-text">桌空闲</text>
          </view>
          <view class="shop-address">
            <image src="/static/img/location.png" mode="aspectFit" class="icon-location"></image>
            <text class="address-text">{{ shop.address }}</text>
          </view>
        </view>

        <!-- 右侧内容 -->
        <view class="shop-right">
          <view class="background-color-block"></view>
          <view class="shop-distance">
            <image src="/static/img/arrow-right.png" mode="aspectFit" class="icon-arrow"></image>
            距离{{ shop.distance }}m
          </view>
          <view v-if="shop.closest" class="shop-closest">离你最近</view>
        </view>

      </view>
    </view>

  </view>
</template>

<script>export default {
  data() {
    const originalShops = [
      {
        id: 1,
        name: '中山电子科技大学店',
        price: 0.46,
        tables: 5,
        address: '广东省中山市石岐区街道龙凤街4号溢彩荟2期4楼403小铁24h无人自助台...',
        distance: 319,
        closest: true
      },
      {
        id: 2,
        name: '中山石岐新都会店',
        price: 0.46,
        tables: 6,
        address: '广东省中山市中山市大信中路石岐大信新都汇A座2层',
        distance: 790,
        closest: false
      }
    ];
    return {
      currentMonth: new Date().getMonth() + 1,
      weekdays: ['Sun', 'Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat'],
      dates: this.generateDates(new Date()),
      searchQuery: '',// 搜索框绑定的值
      shops: [...originalShops], // 初始显示全部店铺
      originalShops: [...originalShops] // 存储原始数据用于恢复
    };
  },
  methods: {
    //  生成日历
    generateDates(date) {
      const year = date.getFullYear();
      const month = date.getMonth();
      const firstDay = new Date(year, month, 1).getDay();
      const lastDate = new Date(year, month + 1, 0).getDate();
      const prevMonthLastDate = new Date(year, month, 0).getDate();

      const dates = [];
      let count = 1;

      // Fill previous month's dates
      for (let i = 0; i < firstDay; i++) {
        dates.push({
          value: prevMonthLastDate - firstDay + 1 + i,
          isCurrentMonth: false
        });
      }

      // Fill current month's dates
      while (count <= lastDate) {
        dates.push({
          value: count++,
          isCurrentMonth: true
        });
      }

      // Fill next month's dates
      const remaining = 42 - dates.length; // 6 weeks * 7 days = 42 cells
      for (let i = 1; i <= remaining; i++) {
        dates.push({
          value: i,
          isCurrentMonth: false
        });
      }

      return dates;
    },
    isToday(value) {
      const today = new Date();
      return (
          value &&
          today.getDate() === value &&
          today.getMonth() === this.currentMonth - 1 &&
          today.getFullYear() === new Date().getFullYear()
      );
    },
    isSelected(value) {
      // You can implement selection logic here
      return false;
    },
    filterShops(query) {
      const lowerCaseQuery = query.toLowerCase();
      return this.shops.filter(shop => {
        return (
            shop.name.toLowerCase().includes(lowerCaseQuery) ||
            shop.address.toLowerCase().includes(lowerCaseQuery)
        );
      });
    },
    onSearch(e) {
      const query = e.detail.value;
      this.searchQuery = query;

      if (query.trim()) {
        this.performSearch();
      } else {
        // 恢复原始店铺列表
        this.restoreOriginalShops(); // 清空输入时恢复原始数据
      }
    },
    performSearch() {
      const query = this.searchQuery.toLowerCase();
      const filtered = this.originalShops.filter(shop => {
        return (
            shop.name.toLowerCase().includes(query) ||
            shop.address.toLowerCase().includes(query)
        );
      });
      this.shops = filtered;
    },
    restoreOriginalShops() {
      this.shops = [...this.originalShops]; // 从原始数据恢复
    },
    navigateToShopDetail(shop) {
      // 跳转到店铺详情页
      uni.navigateTo({
        url: `/pages/tabbar/tabbar-2-detail/shop?id=${shop.id}`
      });
    }
  },
};
</script>

<style>
.page {
  background-color: #eaeaea; /* 页面整体底色 */
}
</style>

<style scoped>
.content {
  text-align: center;
  height:400rpx;
  background-color: #f0d04e;
}

.calendar-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 2rpx;
  background-color: #f0d04e;
}

.month-title {
  font-size: 30px; /* 调整标题字体大小 */
  font-weight: bold;
  margin-left: 30rpx;
}

.month-subtitle{
  font-size: 16px;
  color: black;
  font-weight: bold;
  margin-right: 520rpx;
  margin-top: 5rpx;
}

.calendar-body {
  background-color: #fff;
  border-radius: 10px;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
  padding: 6px;
  width: 80%; /* 调整宽度 */
  max-width: 300px; /* 设置最大宽度 */
  margin: 0 auto; /* 水平居中 */
  margin-top: 10rpx;
}

.calendar-weekdays{
  display: grid;
  grid-template-columns: repeat(7, 1fr);
  gap: 2px; /* 调整间距 */
}

.calendar-dates {
  display: grid;
  grid-template-columns: repeat(7, 1fr);
  gap: 2px; /* 调整间距 */
  margin-top: 5px;
}

.calendar-weekdays text {
  font-size: 15px; /* 调整表头字体大小 */
  color: #999;
  font-weight: bold;
}

.calendar-date {
  display: flex;
  justify-content: center;
  align-items: center;
  height: 26px;
  width: 26px;
  border-radius: 50%;
  font-size: 14px;
  font-weight: bold;
  color: black; /* 默认颜色（当前月份） */
}

.calendar-date.is-other-month {
  color: gray; /* 非当前月份的颜色 */
}

.calendar-date.is-today {
  background-color: #ffeb3b;
  color: #000;
}

.calendar-date.is-selected {
  background-color: #4caf50;
  color: #fff;
}
.search-bar {
  width: 100%;
  max-width: 300px;
  margin: 30rpx auto;
}

.search-wrapper {
  display: flex;              /* 关键：flex 布局 */
  align-items: center;        /* 垂直居中对齐 */
  background-color: #fff;
  border: 5rpx solid #000000;
  border-radius: 10rpx;
  padding: 0 20rpx;
}

.search-input {
  flex: 1;                    /* 占据剩余空间 */
  height: 60rpx;
  font-size: 28rpx;
  border: none;               /* 移除默认边框 */
  outline: none;              /* 移除聚焦边框 */
  background-color: transparent; /* 避免遮挡 */
}

.search-icon-right {
  width: 30rpx;
  height: 30rpx;
  margin-left: 10rpx;
}

.shop-list {
  margin-top: 20rpx;
  background-color: #fff;
  border-radius: 10rpx;
  padding: 20rpx;
  margin-right: 20rpx;
  margin-left: 20rpx;
}

.no-results {
  text-align: center;
  margin-top: 30rpx;
  font-size: 28rpx;
  color: #999;
}

.shop-item {
  display: flex;
  justify-content: space-between;
  padding: 20rpx 0;
  border-bottom: 15rpx solid #eee;
}

.shop-left {
  flex: 6;
  display: flex;
  flex-direction: column; /* 垂直排列 */
  align-items: flex-start; /* 文字内容靠左对齐 */
  border-right: 4rpx solid lightgray; /* 设置右边框：宽度、样式、颜色 */
}

.shop-right {
  flex: 2;
  display: flex;
  flex-direction: column; /* 垂直排列 */
  justify-content: center;
  align-items: center;   /* 右对齐 */
}

/* 新增：背景色块样式 */
.background-color-block {
  width: 20rpx;            /* 背景色块宽度 */
  height: 100%;            /* 背景色块高度，占满整个 .shop-right */
  background-color: #f0d04e; /* 背景色块颜色 */
  position: absolute;       /* 绝对定位 */
  left: -20rpx;            /* 向左偏移，覆盖左边距 */
}

.shop-item:last-child {
  border-bottom: none;
}

.shop-name {
  font-size: 34rpx;
  font-weight: bold;
}

.shop-price {
  font-size: 24rpx;
  color: #000000;
  font-weight: bold;
}

.shop-status {

  color:forestgreen;
  border: 5rpx solid forestgreen;
  padding: 2rpx 6rpx;
  border-radius: 10rpx;
  margin-top: 10rpx;
}

.status-text{
  font-size: 24rpx;
}

.bold-text {
  font-weight: bold;
  font-size: 27rpx; /* 可选：适当增大字体以突出显示 */
  color: forestgreen;
  margin-left: 5rpx;
  margin-right: 5rpx;
}

.shop-address {
  font-size: 24rpx;
  color: #666;
  margin-top: 10rpx;
  display: flex;
  align-items: center;
  width: 90%;
  flex: 1;
}
.address-text {
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2; /* 最多显示两行 */
  overflow: hidden;
  text-overflow: ellipsis;
  flex: 1;             /* 灵活占据剩余空间 */
  word-break: break-all; /* 允许在任意字符处换行 */
  text-align: left;
}

.icon-location {
  width: 40rpx;
  height: 40rpx;
  margin-right: 10rpx;
}

.shop-distance {
  font-size: 26rpx;
  color: #000000;
  display: flex;
  flex-direction: column;
  align-items: center;
}

.icon-arrow {
  width: 50rpx;
  height: 50rpx;
  margin-bottom: 10rpx;
}
.shop-closest {
  font-size: 24rpx;
  color: #fff;
  background-color: #ff6347;
  padding: 5rpx 5rpx;
  border-radius: 10rpx;
  margin-top: 10rpx;
}
</style>